<!doctype html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<title>新Classtyle页面</title>
	<link href="http://classtyle.com/release/classtyle.1.5.1.css" rel="stylesheet" type="text/css" />
	<link href="css/builder.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="js/builder.js"></script>
</head>
<body>
	<!--[if lte IE 8]>
	<style type="text/css">
		div{display:none}
	</style>

	<p style="margin:100px 20px;text-align:center;font-size:20px;line-height:30px">Classtyle Builder不支持IE8及IE8以下版本浏览器，请使用Chrome、Firefox、Opera、Safari或IE9。<br/>如果安装了Google Chrome Frame，可以尝试<a href="http://classtyle.com/builder" target="_blank">在新窗口中打开</a></p>
	<![endif]-->

	<div id="cs-editormode_edit">
		<div class="page">
		</div>
	</div>
	<div id="cs-editormode_code">
		<div class="page">
		</div>
	</div>

	<div class="cs-editormode_tips" id="tips-start">
		<div class="arr">
			<div class="a a-1"></div>
			<div class="a a-2"></div>
			<div class="a a-3"></div>
			<div class="a a-4"></div>
			<div class="a a-5"></div>
		</div>
		<p>点击选中目标结构，即可在内部添加元素</p>
	</div>

	</div>
	<div class="cs-editormode_toolbox">
		<div class="hd">
			<h3>Classtyle Builder</h3>

			<div class="handle" title="移动">
				<div class="d d-1"></div>
				<div class="d d-2"></div>
				<div class="d d-3"></div>
				<div class="d d-4"></div>
				<div class="d d-5"></div>
				<div class="d d-6"></div>
			</div>
		</div>

		<div class="bd">
			<div class="msg" onclick="$(this).hide()"></div>
			<div class="tabswitcher tabswitcher-1" id="divToolbarTab">
				<div class="tabs">
					<ul>
						<li class="tab tab-1" onclick="$('#divToolbarTab').attr('class','tabswitcher tabswitcher-1')">页面</li>
						<li class="tab tab-2" onclick="$('#divToolbarTab').attr('class','tabswitcher tabswitcher-2')">扩展</li>

						<!--<li class="tab tab-5" onclick="$('#divToolbarTab').attr('class','tabswitcher tabswitcher-5')">关于</li>-->
					</ul>
				</div>
				<div class="pans">
					<div class="pan pan-1">
						<div class="item item-pagetitle">
							<h4>页面标题</h4>
							<div class="cs-nobr">
								<input type="text" class="ipt-t" id="iptTitle" onkeydown="if(event.keyCode == 13){fSetTitle(this.value);}"/>
								<button onclick="fSetTitle(document.getElementById('iptTitle').value)">确定</button>
							</div>
						</div>
						<div class="item item-pagewidth">
							<h4>页面宽度</h4>
							<div>
								<select onchange="if(this.value!='auto'){$('#cs-editormode_edit>.page').attr('class','page '+this.value)}else{$('#cs-editormode_edit>.page').attr('class','page')}">
									<option value="auto">自适应</option>
									<option value="cs-page-wide">950px</option>
									<option value="cs-page-narrow">790px</option>
								</select>
							</div>
						</div>
						<div class="item item-charset">
							<h4>字符集</h4>
							<div>
								<select onchange="gState.charset=this.value">
									<option value="utf-8">UTF-8</option>
									<option value="gb2312">GB2312</option>
									<option value="gbk">GBK</option>
								</select>
							</div>
						</div>
					</div>
					<div class="pan pan-2">
						<div class="item item-getext">
							<h4>获取扩展</h4>
							<div class="cs-nobr" id="divGetExt">
								<input type="text" class="ipt-t" id="iptPlugin" onkeydown="if(event.keyCode == 13){document.getElementById('btnLoadPlugin').disabled=true;fLoadPlugin(this.value)}"/>
								<button id="btnLoadPlugin" onclick="this.disabled=true;fLoadPlugin(document.getElementById('iptPlugin').value)">确定</button>
							</div>
							<p class="cs-txt-tips">输入扩展ID或URL</p>
							<div id="divGetExtDebug">
								<textarea class="ipt-t" id="iptPluginDebug"></textarea>
								<button onclick="fLoadPlugin(document.getElementById('iptPluginDebug').value,true)">确定</button>
							</div>
						</div>

						<div class="item item-exts">
							<h4>正在使用的扩展</h4>
							<div id="divUsingExt"></div>
						</div>

						<div class="item item-recmd">
							<h4>如何找到更多扩展？</h4>
							<div class="cs-txt-tips">
								前往 <a href="http://opencss.info" target="_blank" title="Classtyle OpenCSS">OpenCSS.info</a> 看看！
							</div>
							<div class="cs-txt-tips">
								测试：ntesmail, t163
							</div>
						</div>
					</div>

					<div class="pan pan-5">
						<div class="item item-aboutbuilder">
							<h4>关于Classtyle Builder</h4>
							<div class="cs-txt-tips">
								<p>Classtyle Builder是帮助用户快速搭建基于Classtyle CSS框架页面的工具。</p>
							</div>
						</div>

						<div class="item item-aboutcs">
							<h4>关于Classtyle</h4>
							<div class="cs-txt-tips">
								<p>Classtyle是免费的CSS框架。Classtyle的CSS库提供了丰富的功能，并能通过“扩展”来不断增加新的功能。</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="ft">
			<button onclick="fGetHTML()" type="button">查看HTML</button>
		</div>
	</div>
	<div class="cs-editormode_copyright">
		<span>编辑器示意效果仅供参考，以实际页面效果为准</span> | <a href="http://classtyle.com" target="_blank">powered by Classtyle CSS</a>
	</div>
</body>
</html>